<template>
    <div class="crm-talenter-container">
        <el-dialog title="新增人才" v-model="isShowDialog" :close-on-click-modal="false">
            <el-form ref="addCrmTalenterFormRef" :model="formData" :rules="formRules" label-width="100px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="人才姓名" prop="talenterName">
                            <el-input v-model="formData.talenterName" placeholder="请输入人才姓名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="手机号码" prop="mobile">
                            <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="签约时间" prop="signStartTime">
                            <el-date-picker v-model="formData.signStartTime" placeholder="请选择签约开始时间" value-format="YYYY-MM-DD" clearable class="w100"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="到期时间" prop="signEndTime">
                            <el-date-picker v-model="formData.signEndTime" placeholder="请选择签约结束时间" value-format="YYYY-MM-DD" clearable class="w100"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="身份证号码" prop="idNumber">
                            <el-input v-model="formData.idNumber" placeholder="请输入身份证号码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="电话号码" prop="telephone">
                            <el-input v-model="formData.telephone" placeholder="请输入电话号码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="邮箱号码" prop="email">
                            <el-input v-model="formData.email" placeholder="请输入邮箱号码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="账号名称" prop="account">
                            <el-input v-model="formData.account" placeholder="请输入账号名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="账号密码" prop="password">
                            <el-input v-model="formData.password" placeholder="请输入账号密码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="学历资质" prop="qualification">
                            <Dictionary v-model="formData.qualification" dict-label="crm_qualification_type" placeholder="请选择学历资质"></Dictionary>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="许可证书" prop="license">
                            <Dictionary v-model="formData.license" dict-label="crm_license_type" placeholder="请选择许可证书"></Dictionary>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="资质证书" prop="certificates">
                            <Storage :model="certificate" @success="onUploadCertificateSuccess" @remove="onUploadCertificateRemove"></Storage>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="合作协议" prop="cooperations">
                            <Storage :model="cooperation" @success="onUploadCooperationSuccess" @remove="onUploadCooperationRemove"></Storage>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addCrmTalenter } from '/@/api/crm/talenter/index';
import Dictionary from '/@/components/dictionary/index.vue';
import Storage from '/@/views/crm/components/storage/index.vue';
export default {
    name: 'crm/talenter/add',
    components: { Dictionary, Storage },
    setup(props, context) {
        const validCooperationNotEmpty = (rule, value, callback) => {
            const attachments = state.cooperations;
            if(attachments == undefined || attachments.length == 0){
                return callback(new Error('合作协议不能为空'));
            }else{
                return callback();
            }
        }
        const addCrmTalenterFormRef = ref();
        const state = reactive({
            isShowDialog: false,
            certificate: {
                upload:{
                    limit: 10,
                    accept: '.jpg,.png,.svg,.webp,.gif,.pdf',
                    images: []
                }
            },
            cooperation: {
                upload:{
                    limit: 10,
                    accept: '.jpg,.png,.svg,.webp,.gif,.pdf',
                    images: []
                }
            },
            certificates: [],
            cooperations: [],
            formData: {
                attachments: [],
            },
            formRules : {
                talenterName: { required: true, message: '人才姓名不能为空', trigger: 'blur' },
                mobile: { required: true, message: '手机号码不能为空', trigger: 'blur' },
                signStartTime: { required: true, message: '签约时间不能为空', trigger: 'blur' },
                signEndTime: { required: true, message: '到期时间不能为空', trigger: 'blur' },
                idNumber: { required: true, message: '身份证号码不能为空', trigger: 'blur' },
                license: { required: true, message: '许可证书不能为空', trigger: 'blur' },
                cooperations: { required: true, validator: validCooperationNotEmpty, trigger: 'blur' },
            }
        });

        const onUploadCertificateSuccess = (file, urls) => {
            state.certificates.push({url: file.url, name: file.name, businessType: 'CRMTALENTER'});
        };

        const onUploadCertificateRemove = (file, urls) => {
            const index = state.certificates.findIndex((item) => item.url == file.url);
            if(index > -1){
				state.certificates.splice(index, 1);
			}
        };
        const onUploadCooperationSuccess = (file, urls) => {
            state.cooperations.push({url: file.url, name: file.name, businessType: 'CRMTALENTERCONTRACT'});
        };

        const onUploadCooperationRemove = (file, urls) => {
            const index = state.cooperations.findIndex((item) => item.url == file.url);
            if(index > -1){
				state.cooperations.splice(index, 1);
			}
        };
        
        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            for(var key in state.formData) {
                state.formData[key] = undefined;
            }
            addCrmTalenterFormRef.value.resetFields();
            state.formData.attachments = [];
            state.certificate.upload.images = [];
            state.cooperation.upload.images = [];
            state.certificates = [];
            state.cooperations = [];
        };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = () => {
            addCrmTalenterFormRef.value.validate(valid => {
                if(valid){
                    let params = {
                        talenterName: state.formData.talenterName,
                        signStartTime: state.formData.signStartTime,
                        signEndTime: state.formData.signEndTime,
                        idNumber: state.formData.idNumber,
                        qualification: state.formData.qualification,
                        license: state.formData.license,
                        mobile: state.formData.mobile,
                        telephone: state.formData.telephone,
                        email: state.formData.email,
                        remark: state.formData.remark,
                        account: state.formData.account,
                        password: state.formData.password,
                        attachments: [...state.certificates, ...state.cooperations]
                    }
                    addCrmTalenter(params).then((res) => {
                        if(res.code === 0){
                            ElMessage.success('保存成功');
                            context.emit('submit');
                            closeDialog();
                        }
                    });
                }
            });
        };
        return {
            addCrmTalenterFormRef,
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            onUploadCertificateSuccess,
            onUploadCertificateRemove,
            onUploadCooperationSuccess,
            onUploadCooperationRemove,
            ...toRefs(state),
        };
    },
};
</script>